<template>
  <div class="tab-cont">
    <custom-title name="流程部署列表">
      <template #right>
        <el-button type="primary" @click="dialogUpload = true">上传流程文件</el-button>
        <el-button type="primary" @click="handleBpmnInfo">在线绘制流程</el-button>
      </template>
    </custom-title>
    <el-table :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="45" />
      <el-table-column label="流程定义ID" align="center" prop="processDefinitionID" sortable show-overflow-tooltip />
      <el-table-column label="部署ID" align="center" prop="deploymentID" sortable show-overflow-tooltip />
      <el-table-column label="流程定义名称" align="center" prop="name" show-overflow-tooltip />
      <el-table-column label="流程文件名称" align="center" prop="resourceName" show-overflow-tooltip />
      <el-table-column label="KEY" align="center" prop="key" show-overflow-tooltip />
      <el-table-column label="部署版本" align="center" prop="version" width="80px" />
      <el-table-column label="操作" align="center" prop="name" width="260px">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleInfo('start', row)">启动实例</el-button>
          <el-button type="primary" size="mini" class="mx-2" @click="handleInfo('look', row)">查看</el-button>
          <el-button type="danger" size="mini" @click="handleInfo('delete', row)">删除部署</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="list.length" :current-page="form.pageNum" :total="total" :page-size="form.pageSize" @changeData="getDefinitions" />
    <el-dialog title="上传流程文件" :visible.sync="dialogUpload" width="40%">
      <el-form ref="uploadForm" :model="uploadForm" :rules="uploadFormRules" label-width="100px">
        <el-form-item label="上传文件" prop="fileObj">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-input v-model="uploadForm.fileTxt" />
            </el-col>
            <el-col :span="15">
              <el-upload
                ref="upload"
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :on-change="onChange"
                :http-request="
                  (file) => {
                    submitUpload()
                  }
                "
              >
                <el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>上传BPMN</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleUploadClose">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="启动流程部署信息" :visible.sync="dialogProcess" width="40%">
      <el-form ref="processForm" :model="processForm" :rules="processFormRules" label-width="100px">
        <el-form-item label="实例名称" prop="instanceName">
          <el-input v-model="processForm.instanceName" placeholder="请输入实例名称" />
        </el-form-item>
        <el-form-item label="实例描述" prop="instanceVariable">
          <el-input v-model="processForm.instanceVariable" placeholder="请输入实例描述" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleProcessClose">取 消</el-button>
        <el-button type="primary" @click="startProcess">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getDefinitions, startProcess, delDefinition } from '@/api/process'
export default {
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      // 上传流程文件
      dialogUpload: false,
      readyFile: null,
      uploadForm: {
        fileTxt: ''
      },
      uploadFormRules: {
        fileTxt: [{ required: true, message: "请选择文件", trigger: 'blur' }]
      },
      actionUrl: `processDefinition/uploadStreamAndDeployment`,
      // 启动实例
      tabItem: null,
      dialogProcess: false,
      processForm: {
        processDefinitionId: '',
        instanceName: '',
        instanceVariable: ''
      },
      processFormRules: {
        processDefinitionId: [],
        instanceName: [{ required: true, message: "请输入实例名称", trigger: 'blur' }],
        instanceVariable: [{ required: true, message: "请输入实例描述", trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDefinitions()
    })
  },
  methods: {
    // 列表复选框操作
    handleSelectionChange(item) {
      console.log(item)
    },
    // 列表操作
    handleInfo(typ, row) {
      this.tabItem = row
      if (typ === 'start') { // 启动实例
        this.dialogProcess = true
      } else if (typ === 'look') { // 查看
        window.open('http://localhost:89/bpmnjs/dist/index.html?type=lookBpmn&deploymentFileUUID='+row.deploymentID+'&deploymentName='+ encodeURI(row.resourceName)+'');
      } else if (typ === 'delete') { // 删除部署
        this.$confirm('确定要删除选中数据吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delDefinition()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })        
        })
      }
    },
    // 在线绘制流程
    handleBpmnInfo() {
      window.open('http://localhost:89/bpmnjs/dist/index.html?type=addBpmn');
    },
    // 上传流程文件-选择附件
    onChange(file) {
      this.fileTxt = file.name
      this.readyFile = file.raw
    },
    // 上传流程文件-关闭
    handleUploadClose() {
      this.$refs.uploadForm.resetFields()
      this.dialogUpload = false
    },
    // 启动流程部署信息-关闭
    handleProcessClose() {
      this.$refs.processForm.resetFields()
      this.dialogProcess = false
    },
    // 获取流程部署列表
    async getDefinitions(item) {
      this.form.pageNum = item && item.pageNum ? item.pageNum : 1
      this.form.pageSize = item && item.pageSize ? item.pageSize : 10
      const { status, obj } = await getDefinitions(this.form)
      if (status === 0) {
        this.list = obj.list
        this.total = obj.totalNum
      }
    },
    // 上传流程文件-提交文件
    submitUpload() {
      this.$refs.uploadForm.validate(async(valid) => {
        if (valid) {
          const formdata = new FormData()
          formdata.append('processFile', this.readyFile)
          axios.post(this.actionUrl, formdata).then((res) => {
            const result = res.data
            if (result.status === 0) {
              this.$message({
                message: '上传成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: result.msg,
                type: 'error'
              })
            }
            this.handleUploadClose()
          })
        } else {
          return false
        }
      })
    },
    // 启动实例
    startProcess() {
      this.$refs.processForm.validate(async(valid) => {
        if (valid) {
          this.processForm.processDefinitionId = this.tabItem.processDefinitionID
          const { status, msg } = await startProcess(this.processForm)
          if (status === 0) {
            this.$message({
              message: msg,
              type: 'success'
            })
            this.getDefinitions()
            this.handleProcessClose()
          }
        } else {
          return false
        }
      })
    },
    // 删除部署
    async delDefinition() {
      const { status, msg } = await delDefinition({
        depID: this.tabItem.deploymentID ? this.tabItem.deploymentID : '',
        pdID: this.tabItem.processDefinitionID ? this.tabItem.processDefinitionID : ''
      })
      if (status === 0) {
        this.$message({
          message: msg,
          type: 'success'
        })
        this.getDefinitions()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>